<template>
  <div class="hv-color-picker-list">
    <div class="hv-color-picker-item" v-for="(color, index) in colorList" :key="index">
      <hv-color-dropdown-picker
        :color="color"
        :size="size"
        :colorPreviewVisible="false"
        @change="colorChange($event, index)"
      />
      <div :class="['hv-color-picker-item-del', 'hv-color-picker-item-del-' + size]">
        <hv-dynamic-icon
          iconName="CloseCircleFilled"
          :iconProps="{ class: 'del-icon' }"
          @click="delColor(index)"
        />
        <div class="hv-color-picker-item-del-bg"></div>
      </div>
    </div>
    <div
      :class="[
        'hv-color-picker-item',
        'hv-color-picker-item-add',
        'hv-color-picker-item-add-' + size,
      ]"
      @click="addColor"
    >
      <hv-dynamic-icon iconName="PlusOutlined" :iconProps="{ class: 'icon' }" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import type { PropType } from "vue";
import hvColorDropdownPicker from "./ColorDropdownPicker.vue";

const props = defineProps({
  colorList: {
    type: Array as PropType<string[]>,
    default: () => [],
  },
  size: {
    type: String,
    default: "default",
  },
  defaultColor: {
    type: String,
    default: "#000000",
  },
});

const emit = defineEmits(["update:colorList", "change"]);

const colorChange = (color: string, index: number) => {
  const list = props.colorList;
  list[index] = color;
  emit("update:colorList", list);
  emit("change", list);
};

const addColor = () => {
  const list = props.colorList;
  list.push(props.defaultColor);
  emit("update:colorList", list);
  emit("change", list);
};

const delColor = (index: number) => {
  const list = props.colorList;
  list.splice(index, 1);
  emit("update:colorList", list);
  emit("change", list);
};
</script>

<style lang="less" scoped>
@import "./ColorPickerList.less";
</style>
